<template>
  <div ref="chartContainer" style="width: 100%; height: 100%" class="geo-chart-container"></div>
</template>
<script setup lang="ts">
import {getIpAddressListByCitySync} from "@/api/manage";
import {onBeforeUnmount, onMounted, ref} from "vue";
import * as echarts from 'echarts'
// 通过动态 import 加载 GeoJSON 数据
import chinaGeoJSON from './china.json'
// 定义图表容器的引用
const chartContainer = ref(null)
onMounted(async () => {
  await getData()
  initChart()
})

interface ChartDataItem {
  province: string;
  total_count: string;
}

let chartData = ref<ChartDataItem[]>([])
const initChart = () => {
  const chart = echarts.init(chartContainer.value)
  //数据处理
  let data = chartData.value.map(item => {
    return {
      name: item.province,
      value: item.total_count
    }
  })
  
  // 确保图表容器已经渲染完成
  setTimeout(() => {
    chart.resize()
  }, 100)
  // 注册中国地图
  echarts.registerMap('china', chinaGeoJSON)
  const option = {
    backgroundColor: '#71f8d4',
    title: {
      text: '全国用户分布统计',
      left: 'center',
      top: '5%',
      textStyle: {
        color: '#333',
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        // 判断 c 是否为 NaN
        const value = isNaN(params.value) ? 0 : params.value;
        return `${params.name}: ${value}人`;
      },
      showDelay: 0,
      transitionDuration: 0.2,
    },
    visualMap: {
      textStyle: {color: '#fff'},
      min: 0,
      max: 400,
      left: 100,
      bottom: 300,
      color: ['#5475f5', '#9feaa5', '#3FA7FF', '#66E0E3', '#FFDC5E', '#9fb5ea'],
      text: ['高', '低'],
      calculable: true
    },
    series: [
      {
        name: '数据总数',
        type: 'map',
        map: 'china',
        zoom: 1.7,
        roam: true,
        center: [104.0, 36.0], // 设置中心点经纬度，使地图初始定位到中国中部
        label: {
          show: true,
          color: '#fff', // 字体颜色
          fontSize: 12,
          fontWeight: 'bold'
        },
        itemStyle: {
          //地图区域的多边形 图形样式
          normal: {
            //是图形在默认状态下的样式
            label: {
              show: true,
              position: 'inside',
              textStyle: {color: 'rgb(19,21,1)'},
            },
          },
          emphasis: {
            //是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
            label: {show: true},
            areaColor: '#08d34e',
          },
        },
        emphasis: {
          itemStyle: {
            areaColor: '#f00', // 悬停时区块的颜色
            borderWidth: 2, // 悬停时边框的宽度
            borderColor: '#ff0' // 悬停时边框颜色
          }
        },
        data: data
      }
    ]
  }
  chart.setOption(option)
  // 设置窗口尺寸变化时，自动调整图表大小
  window.addEventListener('resize', () => {
    chart.resize()
  })

  // 清理事件监听器，避免内存泄漏
  onBeforeUnmount(() => {
    window.removeEventListener('resize', () => chart.resize())
  })
}

const getData = async () => {
  let res = await getIpAddressListByCitySync()
  chartData.value = res.data
  console.log(res)
}
</script>


<style scoped lang="scss">
.geo-chart-container {
  width: 100%;
  height: 100%;
  min-height: 540px;
}
</style>